<!DOCTYPE html>
<html>
<head>
<script>
testRunner.waitUntilDone();
</script>
<script src='../../../fast/forms/resources/picker-common.js'></script>
<link rel="match" href="color-picker-from-color-suggestion-picker-expected.html">
</head>
<body>
<input type='color' id='color' list='gray' style="visibility: hidden;">
<datalist id='gray'>
    <option>#ffffff</option>
    <option>#eeeeee</option>
    <option>#dddddd</option>
    <option>#cccccc</option>
    <option>#bbbbbb</option>
    <option>#aaaaaa</option>
    <option>#999999</option>
    <option>#888888</option>
    <option>#777777</option>
    <option>#666666</option>
    <option>#555555</option>
    <option>#444444</option>
    <option>#333333</option>
    <option>#222222</option>
    <option>#111111</option>
    <option>#000000</option>
</datalist>
<script>
openPicker(document.getElementById('color'), openPickerSuccessfulCallback, () => testRunner.notifyDone());

function openPickerSuccessfulCallback() {
  popupWindow.focus();
  const popupDocument = popupWindow.document;
  const otherColor = popupDocument.querySelector('.other-color');
  const otherColorRect = otherColor.getBoundingClientRect();
  // Click the Other color button.
  eventSender.mouseMoveTo(otherColorRect.left + (otherColorRect.width / 2), otherColorRect.top + (otherColorRect.height / 2));
  eventSender.mouseDown();
  eventSender.mouseUp();
  popupWindow.focus();
  testRunner.notifyDone();
}
</script>
</body>
</html>
